<template>
  <div v-show="componentCurrent == stepFirst">
    <stepFirst ref="componentRef" />
  </div>
  <div v-show="componentCurrent == stepSeconds">
    <stepSeconds ref="componentRef1" />
  </div>
  <!-- <component :is="componentCurrent" ref="componentRef" /> -->
  <CommonFooterBar>
    <template v-if="componentCurrent == stepFirst">
      <el-button type="primary" @click="handleSubmit">下一步</el-button>
    </template>
    <template v-else>
      <el-button @click="toStepFirst">返回上一步</el-button>
      <el-button :loading="loading" @click="handleSubmit">保存为草稿</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit(2)">
        确认提交
      </el-button>
    </template>
  </CommonFooterBar>
</template>

<script setup>
  import CommonFooterBar from '@/components/commonFooterBar'
  import stepFirst from './stepFirst/index'
  import stepSeconds from '../stepSeconds/index'
  import { planTaskCreate, planTaskUpdate } from '@/api/project/approval/task'
  import { useCloseTabNavigate } from '@/utils/useCloseTabNavigate'
  import { postDraftBoxCreate } from '@/api/project/drafts'

  const { closeTabNavigate } = useCloseTabNavigate()
  const $baseMessage = inject('$baseMessage')
  const route = useRoute()

  const emits = defineEmits(['changeShow'])
  const props = defineProps({
    topicId: {
      type: [String, Number],
      default: '',
    },
  })

  const componentRef = ref()
  const componentRef1 = ref()
  const componentCurrent = shallowRef(stepFirst)
  const loading = ref(false)
  let stepFirstParams = {}

  const toStepFirst = () => {
    componentCurrent.value = stepFirst
    emits('changeShow', true)
  }

  const handleSubmit = (saveType = 1) => {
    if (componentCurrent.value == stepFirst) {
      const params = componentRef.value.getFormData()
      if (!params) {
        return
      }
      stepFirstParams = {
        baseInfo: {},
      }
      for (const key in params) {
        if (
          ![
            'budgetInfo',
            'schedulePlanInfo',
            'memberInfo',
            'reportIds',
            'reportUnitIds',
          ].includes(key)
        ) {
          stepFirstParams.baseInfo[key] = params[key]
        } else {
          stepFirstParams[key] = params[key]
        }
      }
      componentCurrent.value = stepSeconds
      const scrollEl = document.querySelector('#app')
      scrollEl.scrollTo({ top: 0, behavior: 'smooth' })
      emits('changeShow', false)
    } else {
      const params = componentRef1.value.getFormData()
      if (!params) {
        return
      }
      const defaultSecondsParams = {
        ipBaseInfo: {},
      }
      for (const key in params) {
        if (!['ipMemberList', 'ipInnovationContentList'].includes(key)) {
          defaultSecondsParams.ipBaseInfo[key] = params[key]
        } else {
          defaultSecondsParams[key] = params[key]
        }
      }

      const FormData = {
        ...stepFirstParams,
        ipReportInfo: defaultSecondsParams,
        baseInfo: {
          ...stepFirstParams.baseInfo,
          topicId: props.topicId,
          taskType: 1,
        },
      }

      delete FormData.budgetInfo

      loading.value = true

      if (saveType == 2) {
        const api =
          route.query.id && route.query?.getType == 2
            ? planTaskUpdate
            : planTaskCreate
        if (route.query?.getType == 1) {
          FormData.draftBoxId = route.query.id
        }
        if (route.query?.getType == 2) {
          FormData.baseInfo.id = route.query.id
        }
        api(FormData)
          .then((res) => {
            if (res.code == 0 || res.code == 200) {
              $baseMessage('上报成功')
              closeTabNavigate()
            }
          })
          .finally(() => {
            loading.value = false
          })
      } else {
        const formData = {
          id: route.query?.getType == 1 ? route.query.id : '',
          type: 'PROJECT_PLAN_TASK',
          submitJson: JSON.stringify({
            ...FormData,
            draftBoxId: route.query?.getType == 1 ? route.query.id : '',
          }),
        }

        postDraftBoxCreate(formData)
          .then((res) => {
            if (res.code == 0 || res.code == 200) {
              $baseMessage('保存草稿成功')
              closeTabNavigate()
            }
          })
          .finally(() => {
            loading.value = false
          })
      }
    }
  }

  const setFormData = (detailData) => {
    componentRef.value.setFormData(detailData)
    componentRef1.value.setFormData(detailData)
  }

  defineExpose({ setFormData })
</script>

<style lang="scss" scoped></style>
